<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="live.common.Format"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!doctype html>

<html style="overflow:hidden">

<head>
<base href="<%=basePath %>">
<META content="text/html; charset=UTF-8" http-equiv="Content-Type">
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<link rel="stylesheet" type="text/css" href="hfcz/css/grids.css" />

<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="hfcz/css/charging.css" />

<title>充话费-充值中心-淘宝网</title>

</head>



<body class="telephone">

			<form class="tel-form" id="J_TelForm" method="get" action="/hfcz/directFill.do" target="_parent" onsubmit="return valPost()">

			<!--标题-->

			<div class="tel-title" title="安全、快捷、方便">安全、快捷、方便</div>

			<!--号码-->

			<div class="tel-section tel-num">

				<label class="tel-section-title" for="J_TelInput">手机号：</label>

				<div class="tel-section-field">

					<div class="tel-num-wrapper" id="J_TelInputBox">

                        <input class="tel-num-input" id="J_TelInput" maxlength="11" autocomplete="off" name="phone" type="text" value="请输入充值号码"/>

					</div>

					<span class="tel-num-msg" id="J_TelInputMsg"></span>

					<span class="tel-num-info" id="J_TelInfoBox">

						<span id="J_TelInfo"></span>（<a id="J_TelInfoChange" href="#" hidefocus="true">修改</a>）

					</span>

					<button class="tel-num-btn" id="J_TelBtnSelectInfo" type="button" hidefocus="true">选择区域/运营商</button>

				</div>

			</div>

			<!--二次确认-->

			<div class="tel-section tel-num tel-num-cfm" id="J_TelInputCfmPanel">

				<label class="tel-section-title" for="J_TelInputCfm">确认号码：</label>

				<div class="tel-section-field">

					<div class="tel-num-wrapper" id="J_TelInputCfmBox">

						<input class="tel-num-input" id="J_TelInputCfm" maxlength="11" autocomplete="off" name="phone-cfm" type="text" value="再次输入号码" />

					</div>

					<span class="tel-num-msg" id="J_TelInputCfmMsg"></span>

					<span class="tel-num-info" id="J_TelInfoCfmBox">

						<span id="J_TelInfoCfm"></span><!-- （<a id="J_TelInfoCfmChange" href="#">修改</a>） -->

					</span>

					<button class="tel-num-btn" id="J_TelBtnSelectInfoCfm" type="button" hidefocus="true">选择区域/运营商</button>

				</div>

			</div>

			<!--号码归属地及网络服务提供商信息-->

			<%--<div class="tel-section-2 tel-zone-isp" id="J_TelInfoSelectPanel">

				<label class="tel-section-title" for="J_TelZone">所&nbsp;&nbsp;&nbsp;属：</label>

				<select class="tel-section-field" id="J_TelZone">

					<option>请选择</option>

					<option value="浙江">浙江</option>

					<option value="上海">上海</option>

					<option value="北京">北京</option>

					<option value="广东">广东</option>

					<option value="江苏">江苏</option>

					<option value="安徽">安徽</option>

					<option value="重庆">重庆</option>

					<option value="福建">福建</option>

					<option value="甘肃">甘肃</option>

					<option value="广西">广西</option>

					<option value="贵州">贵州</option>

					<option value="河北">河北</option>

					<option value="湖北">湖北</option>

					<option value="黑龙江">黑龙江</option>

					<option value="海南">海南</option>

					<option value="河南">河南</option>

					<option value="湖南">湖南</option>

					<option value="吉林">吉林</option>

					<option value="江西">江西</option>

					<option value="辽宁">辽宁</option>

					<option value="内蒙古">内蒙古</option>

					<option value="宁夏">宁夏</option>

					<option value="青海">青海</option>

					<option value="四川">四川</option>

					<option value="山东">山东</option>

					<option value="山西">山西</option>

					<option value="陕西">陕西</option>

					<option value="天津">天津</option>

					<option value="新疆">新疆</option>

					<option value="西藏">西藏</option>

					<option value="云南">云南</option>

				</select>

				<label class="tel-section-title" for="J_TelISP">运营商：</label>

				<select class="tel-section-field" id="J_TelISP" name="">

					<option>请选择</option>

					<option value="移动">移动</option>

					<option value="联通">联通</option>

					<option value="电信">电信/CDMA</option>

				</select>

			</div> --%>

			<!--充值方式-->

			<div class="tel-section tel-method" id="J_TelMethodPanel">

				<label class="tel-section-title">充值方式：</label>

				<div class="tel-section-field">

					<div class="tel-method-radio" id="J_TelMethod">

						<p>

							<input id="J_MethodRadioEcard" type="radio" value="0" checked="checked" />

							<label for="J_MethodRadioEcard">自动充值<span>（1-10分钟充值到帐）</span></label>

						</p>
					</div>
				</div>

			</div>

			<!--面值-->

			<div class="tel-section" style="height: auto;">

				<label class="tel-section-title">面&nbsp;&nbsp;&nbsp;值：</label>

				<div class="tel-section-field tel-denomination" id="J_TelDenomination">

					<!-- modified by mbn 加入input的值，以供取pidvid判断 start-->

					<input id="J_Denomination100" type="radio" value="100" disabled="disabled" checked="checked" />

					<label for="J_Denomination100">100元</label>

					<input id="J_Denomination50" type="radio" value="50" disabled="disabled" />

					<label class="label-short" for="J_Denomination50">50元</label>

					

					<%-- <label class="label-short" for="J_DenominationElse">其他</label>

					<!-- modified by mbn 加入input的值，以供取pidvid判断 end-->

					<!-- modified by mbn 修改默认的其他面值为移动的面值 start-->

					<!--<select name="">

						<option value ="1">1元</option>

						<option value ="10">10元</option>

						<option value ="20">20元</option>

						<option value ="30" selected>30元</option>

						<option value ="200">200元</option>

						<option value ="300">300元</option>

						<option value ="500">500元</option>

						<option value ="1000">1000元</option>

					</select>-->

					<!-- modified by mbn 修改默认的其他面值为移动的面值 end-->--%>

				</div>
			</div>
			
			<!--售价-->

			<div class="tel-section">

				<label class="tel-section-title" id="J_TelPriceLabel">售&nbsp;&nbsp;&nbsp;价：</label>

				<div class="tel-section-field">

					<span class="tel-price" id="J_TelPrice">0&nbsp;元</span>

				</div>

			</div>

			<!--立刻购买-->
			<div class="tel-buy with-ad" id="J_TelBuyPanel">

				<button class="tel-submit" id="J_TelSubmitBtn" type="submit" hidefocus="true">点此充值</button>

							</div>
			
			<%-- <input type="text" name="event_submit_do_buy" value="1" />--%>

			<input type="hidden" id="prodid"   name="prodid" value="" />
			
			<%-- <input type="text" id="discount"   name="discount" value="" />--%>
			
			<input type="hidden" id="realPrice"   name="realPrice" value="" />
			<input type="hidden" name="num" value="<%="WM"+Format.getInstance().returnSystemNum() %>"
		</form>
<script type="text/javascript"> 
    function checkphone() {
        var x = $("#J_TelInput").val().replace(/\s/g, "");
        var tip = $("#J_TelInputMsg");
        if (x == ""&&x=="请输入充值号码") {
            $("#J_TelInput").data("status", 0);
            return false;
        } else {
            var patrn = /^(1[3,5,8])\d{9}$/;
            if (x != ""&&x!="请输入充值号码"&&!patrn.exec(x)) {
                tip.html("请输入正确的号码").show();
                $("#J_TelInputCfm").val("再次输入号码");
                $("#J_TelInput").data("status", 0);
                return false;
            }
        }
    }
    function valPost() {
        if ($("#J_TelInput").data("status") == 1) {
               return true; 
             }
        else {
            return false
             };
    }
    function telDenominationInit(){
    	var info='';
    	info+='<input id="J_Denomination100" type="radio" value="100" disabled="disabled" checked="checked" />'
		info+='<label for="J_Denomination100">100元</label>';
		info+='<input id="J_Denomination50" type="radio" value="50" disabled="disabled" />';
		info+='<label class="label-short" for="J_Denomination50">50元</label>';
		$("#J_TelDenomination").html(info);
		clear();
    }
    $(function () {
        $("#J_TelInput").blur(function () {
            var x = $(this).val().replace(/\s/g, "");
            if (x != ""&&x!="请输入充值号码") {
                var x1 = x.substring(0, 3);
                var x2 = x.substring(3, 7);
                var x3 = x.substring(7, 11);
                $(this).val(x1 + "" + x2 + "" + x3);
            }else{
            	$(this).val("请输入充值号码");
            	$("#J_TelInput").data("status", 0);
            }
            checkphone();
        }).focus(function () {
        	$(this).val("");
        	telDenominationInit();
        	$("#J_TelInputCfm").val("再次输入号码");
        	$("#J_TelInputCfmMsg").hide();
        	$("#J_TelInfoCfmBox").hide();
        	$("#J_TelInputMsg").hide();
        	$("#J_TelInputCfmPanel").show();
            $(this).val($(this).val().replace(/\s/g, ""));
            var rtextRange = $(this).get(0).createTextRange();
            rtextRange.moveStart('character', $(this).get(0).value.length);
            rtextRange.collapse(true);
            rtextRange.select();
        }).keyup(function () {
            if ($("#J_TelInputCfm").val() != ""&&$("#J_TelInputCfm").val() != "再次输入号码") {
                $("#J_TelInputCfm").val("再次输入号码");
                $("#J_TelInput").data("status", 0);
            }
            $("#J_TelInfoBox").hide();
            $("#J_TelInfoSelectPanel").hide();
            $("#tel_isChange").val("0"); /*是否改变运营商*/
            $(".tel-section").addClass("ie8bug");
            $("#J_TelInput").data("status", 0);
        });
        $("#J_TelInputCfm").focus(function(){
         if($(this).val()=="再次输入号码"){
         	$(this).val("");
         	$("#J_TelInput").data("status", 0);
         }
        }).blur(function(){
        	if($(this).val()==""){
        		$(this).val("再次输入号码");
        		$("#J_TelInput").data("status", 0);
        	}
        	if($(this).val()!=$("#J_TelInput").val()&& $("#J_TelInput").val()!="请输入充值号码"&&$("#J_TelInputMsg").html()!=""){
        			$("#J_TelInfoCfmBox").hide();
        			$("#J_TelInputCfmMsg").html("两次输入不一致").show();
        			$(this).select();
        			$("#J_TelInput").data("status", 0);
        		}
        }).keyup(function(){
        	if($(this).val().length==11){
        		if($(this).val()!=$("#J_TelInput").val()){
        			$("#J_TelInfoCfmBox").hide();
        			$("#J_TelInputCfmMsg").html("两次输入不一致").show();
        			$(this).select();
        			$("#J_TelInput").data("status", 0);
        		}else{
        		$("#J_TelInputCfmMsg").hide();
        		$("#J_TelDenomination").show();
				$("#J_TelDenomination").html("<img src=\"/images/ajax-loader.gif\"/>面值获取中……");
				setTimeout(function(){
        			$.ajax({
                            type: "POST",
                            url: "/hfcz/pro.do?op=getPros",
                            timeout: 20000,
                            dataType: "json",
                            async: false,
                            data: "phone=" + $.trim($("#J_TelInputCfm").val()),
                            success: function (data) {
                                if (typeof (data) != 'undefined') {
                                var proInfos="";
                                $(data).each(function(i){
                                	proInfos+="<input alt=\""+data[i].prodId+"\" onclick=\"checkPro(this)\" id=\"J_Denomination"+data[i].prodContent+"\" name=\"b\" type=\"radio\" value=\""+data[i].prodPrice+"\" \/>"
												+"&nbsp;<label for=\"J_Denomination"+data[i].prodContent+"\">"+data[i].prodContent+"<\/label>"
									if((i+1)%4==0){proInfos+="<BR/>"}
									
                                });
                                $("#J_TelDenomination").html(proInfos);
                                      //  $("#J_TelInfoCfm").html(data.provincename + data.isptype);
                                        $("#J_TelZone").val(data.provincename);
                                        $("#J_TelISP").val(data.isptype);
                                }else {
                                    $("#J_TelDenomination").html("暂无充值面额");
                                }
                            }
						, error: function () {
						    $("#J_TelDenomination").html("网络繁忙！请稍后刷新再尝试，谢谢。");
						}
                        });
                        $("#J_TelInput").data("status", 1);
                        },1000);
                        return true;
        		}
        	}
        });
        $("#J_TelInputCfm").blur(function () { checkphone() })
        $("#J_TelInfoChange").click(function () {
            $("#J_TelInfoSelectPanel").show();
            $("#tel_isChange").val("1")
            $(".tel-section").addClass("ie8bug");
        });
        $("input[name='denomination']").click(function () {
            if ($(this).val() == "100") { $("#J_TelPrice").html("99.5元"); } else { $("#J_TelPrice").html("49.8元"); }
        });
    })
    function checkPro(obj){
 		$('#J_TelPrice').html($(obj).val()+"&nbsp;元");
 		$('#prodid').val($(obj).attr('alt'));
 		//$('#discount').val($(obj).val());
 		$('#realPrice').val($(obj).next().text());
    }
    function clear(){
    	$('#J_TelPrice').html("0&nbsp;元");
 		$('#prodid').val("");
 		//$('#discount').val("");
 		$('#realPrice').val("");
    }
</script>


	</body>

</html>



